<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>团扇寻踪</title>
    <link rel="stylesheet" href="./css/all.css" />
  </head>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    audio {
      z-index: 100;
    }
    .container {
      display: flex;
      justify-content: center;
      position: relative;
      align-items: center;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      background-image: url("./img/bac1.png");
      background-size: cover;
      transition: all 0.5s ease;
    }
    /* 三栏 */
    .left {
      width: 25%;
      height: 100%;
      display: flex;
      position: relative;
      transition: all 0.8s ease;
      opacity: 0;
    }
    .left.active {
      opacity: 1;
    }
    .center {
      width: 50%;
      height: 100%;
      display: flex;
      position: relative;
      justify-content: center;
      align-items: flex-end;
      transition: all 0.8s ease;
    }
    .right {
      width: 27%;
      height: 100%;
      display: flex;
      position: relative;
      transition: all 0.8s ease;
      opacity: 0;
    }
    .right.active {
      opacity: 1;
    }
    /* 结束 */
    .img1 > img,
    .img2 > img,
    .img3 > img,
    .img4 > img,
    .right1 > img,
    .right2 > img,
    .right3 > img {
      width: 100%;
    }
    /*  左侧图片 */
    .img1 {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      position: absolute;
      transition: all 0.5s ease;
      transform: rotate(25deg) translateX(-45%) translateY(17%) scale(0.99);
      /* 可选：让旋转后的元素基于自身中心旋转 */
      transform-origin: center center;
      top: 0;
      z-index: 4;
    }
    .img2 {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      position: absolute;
      transition: all 0.5s ease;
      transform: rotate(50deg) translateX(-7%) translateY(17%) scale(1.05);
      /* 可选：让旋转后的元素基于自身中心旋转 */
      transform-origin: center center;
      top: 32%;
      left: 8%;
      z-index: 2;
    }
    .img3 {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      position: absolute;
      transition: all 0.5s ease;
      transform: rotate(9deg) translateX(-22%) translateY(15%) scale(0.9);
      /* 可选：让旋转后的元素基于自身中心旋转 */
      transform-origin: center center;
      bottom: 0;
      z-index: 3;
    }
    .img4 {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      position: absolute;
      transition: all 0.5s ease;
      transform: rotate(29deg) translateX(-7%) translateY(32%) scale(0.8);
      /* 可选：让旋转后的元素基于自身中心旋转 */
      transform-origin: center center;
      bottom: 0;
      left: 34%;
      z-index: 1;
    }
    .img1.active,
    .img2.active,
    .img3.active,
    .img4.active {
      transition: all 1s ease;
      transform: rotate(-45deg) translateX(-10%) translateY(-15%);
    }
    .right1.ractive,
    .right2.ractive,
    .right3.ractive {
      transition: all 1s ease;
      transform: rotate(-10deg) translateX(5%) translateY(-3%);
    }
    /* 左结束 */
    /* 右开始 */
    .right1 {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      position: absolute;
      transition: all 0.5s ease;
      transform: rotate(-45deg) scale(0.9) translateX(21%) translateY(15%);
      /* 可选：让旋转后的元素基于自身中心旋转 */
      transform-origin: right;
      bottom: 2%;
      right: 0;
      z-index: 4;
    }
    .right2 {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      position: absolute;
      transition: all 0.5s ease;
      transform: rotate(-53deg) scale(0.9);
      /* 可选：让旋转后的元素基于自身中心旋转 */
      transform-origin: right bottom;
      bottom: 23%;
      left: 10%;
      z-index: 2;
    }
    .right3 {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      position: absolute;
      transition: all 0.5s ease;
      transform: rotate(26deg) scale(0.85);
      /* 可选：让旋转后的元素基于自身中心旋转 */
      transform-origin: right bottom;
      top: 42%;
      right: 0;
      z-index: 1;
    }
    /* 中间 */
    .center-box {
      display: flex;
      width: 100%;
      height: 90%;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 80%;
      font-family: 华文行楷;
      transition: all 1s ease;
      transform: scale(0.3);
      opacity: 0;
    }
    .center-box.active {
      transform: scale(1);
      opacity: 1;
    }
    .main {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #5a534b;
      transition: all 0.5s ease;
      height: 80%;
      width: 60%;
    }
    .main-left {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 50%;
      height: 100%;
      justify-content: flex-start;
      text-align: center;
    }
    .main-left > span {
      display: flex;
      text-align: center;
      font-size: 10em;
    }
    .main-left > div {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 60px;
    }
    .main-left > div > img {
      width: 100%;
    }
    .main-left > span:nth-child(2) {
      font-size: 13em;
    }
    .main-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      height: 100%;
      width: 50%;
    }
    .main-right > span {
      display: flex;
      font-size: 10em;
    }

    .main-right > span:nth-child(3) {
      font-size: 11em;
    }
    .genie {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100px;
    }
    .genie > img {
      width: 100%;
    }
    .footer {
      display: flex;
      flex-direction: column;
      height: 20%;
      justify-content: center;
      /* margin-top: 8%; */
      align-items: center;
      font-size: 1.8em;
      /* color: #eecda9; */
      color: #e79d97;
      letter-spacing: 19px;
      font-family: font3;
      /* transform: translateY(-100%); */
    }
    .footer > span:nth-child(1) {
      opacity: 0.8;
      /* background-color: #5a534b; */
    }
    .footer > span {
      color: #ecb478;
      color: #b37a75;
      color: #749ba9;
      color: #597882;
    }

    .next {
      display: flex;
      justify-content: center;
      text-align: center;
      font-size: 2em;
      letter-spacing: 14px;
      padding-bottom: 1px;
      padding-bottom: 20px;
      margin-top: 10px;
      width: 300px;
      height: 80px;
      transition: all 0.5s ease;
      animation: floatAnimation 2s infinite ease-in-out;
      color: #b37a75;
    }
    .next.netactive {
      transition: all 1s ease;
      font-size: 1.4em;
      opacity: 0.6;
    }
    @keyframes floatAnimation {
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-7px);
      }
      100% {
        transform: translateY(0);
      }
    }

    /* 鼠标跟随 */
    #follower {
      position: absolute;
      z-index: 999;
      transition: transform 0.1s ease;
      width: 20px;
      height: 20px;

      background-color: rgba(212, 38, 38, 0.4);
      position: absolute;
      border-radius: 50%; /* 将方形 div 变成圆形 */
      pointer-events: none;
    }
    .button {
      position: absolute;
      width: 10px;
      height: 10px;
      opacity: 0.01;
    }
  </style>
  <body>
    <div class="container">
      <div id="follower"></div>
      <div class="left">
        <div class="img1"><img src="./img/index/index1-1.png" alt="" /></div>
        <div class="img2"><img src="./img/index/index1-3.png" alt="" /></div>
        <div class="img3"><img src="./img/index/index1-2.png" alt="" /></div>
        <div class="img4"><img src="./img/index/index1-4.png" alt="" /></div>
      </div>
      <div class="center">
        <div class="center-box">
          <div class="main">
            <div class="main-left">
              <span>团</span>
              <span>扇</span>
              <div><img src="./img/index/logo.png" alt="" /></div>
            </div>
            <div class="main-right">
              <div class="genie">
                <img src="./img/index/genie-0.png" alt="" />
              </div>
              <span>寻</span>
              <span>踪</span>
            </div>
          </div>

          <div class="footer">
            <span>团扇信息可视化</span>
            <div class="next">点击进入</div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right1"><img src="./img/index/index1-1.png" alt="" /></div>
        <div class="right2"><img src="./img/index/index1-3.png" alt="" /></div>
        <div class="right3"><img src="./img/index/index1-4.png" alt="" /></div>
      </div>

      <div class="button"></div>
    </div>
  </body>
</html>
<script>
  (() => {
    window.onload = () => {
      enter();
      initFollow();
      initCheck();
    };
  })();

  // 进入动画
  function enter() {
    const right = document.querySelector(".right");
    const left = document.querySelector(".left");
    const mainbox = document.querySelector(".center-box");

    right.classList.add("active");
    left.classList.add("active");
    mainbox.classList.add("active");
  }

  function initCheck() {
    const nextSpan = document.querySelector(".next");
    const body = document.body;
    const left = document.querySelector(".left");
    const right = document.querySelector(".right");
    const center = document.querySelector(".center");
    const leftImgs = document.querySelectorAll(".left >div");
    const rightImgs = document.querySelectorAll(".right > div");
    const next = document.querySelector(".next");

    body.addEventListener("click", () => {
      for (let i = 0; i < 4; i++) {
        leftImgs[i].classList.add("active");
        if (i < 3) {
          rightImgs[i].classList.add("ractive");
        }
      }
      next.classList.add("netactive");
      left.style.opacity = " 0";
      right.style.opacity = "0";
      center.style.opacity = "0";
      setTimeout(() => {
        window.location.href = "./src/introduce.html";
      }, 800);
    });
  }

  function initFollow() {
    const follower = document.querySelector("#follower");
    window.addEventListener("mousemove", (event) => {
      const mouseX = event.clientX;
      const mouseY = event.clientY;
      // 计算偏移量，使 follower 在鼠标中心
      const offsetX = mouseX - follower.offsetWidth / 3;
      const offsetY = mouseY - follower.offsetHeight / 3;
      // 设置 follower 的位置
      follower.style.left = `${offsetX}px`;
      follower.style.top = `${offsetY}px`;
    });
  }
</script>
